// 交易信号和风险控制模块
export class TradingSignals {
    constructor() {
        this.signalContainer = document.getElementById('trading-signals');
        this.riskContainer = document.getElementById('risk-controls');
    }

    // 更新交易信号
    updateSignals(signals) {
        if (!this.signalContainer) return;
        
        const signalHTML = `
            <div class="space-y-4">
                <div class="flex justify-between items-center">
                    <h4 class="font-semibold">当前信号</h4>
                    <span class="tag ${this.getSignalClass(signals.type)}">${signals.type}</span>
                </div>
                
                <div class="grid grid-cols-2 gap-4">
                    <div class="bg-gray-50 p-3 rounded-lg">
                        <div class="text-sm text-gray-600">信号强度</div>
                        <div class="text-lg font-semibold">${signals.strength}%</div>
                    </div>
                    <div class="bg-gray-50 p-3 rounded-lg">
                        <div class="text-sm text-gray-600">持续时间</div>
                        <div class="text-lg font-semibold">${signals.duration}</div>
                    </div>
                </div>

                <div class="space-y-2">
                    <div class="text-sm text-gray-600">技术指标</div>
                    ${this.renderIndicators(signals.indicators)}
                </div>
            </div>
        `;

        this.signalContainer.innerHTML = signalHTML;
    }

    // 更新风险控制信息
    updateRiskControls(riskData) {
        if (!this.riskContainer) return;

        const riskHTML = `
            <div class="space-y-4">
                <h4 class="font-semibold">风险控制</h4>
                
                <div class="grid grid-cols-2 gap-4">
                    <div class="bg-gray-50 p-3 rounded-lg">
                        <div class="text-sm text-gray-600">止损位</div>
                        <div class="text-lg font-semibold text-red-600">¥${riskData.stopLoss}</div>
                    </div>
                    <div class="bg-gray-50 p-3 rounded-lg">
                        <div class="text-sm text-gray-600">止盈位</div>
                        <div class="text-lg font-semibold text-green-600">¥${riskData.takeProfit}</div>
                    </div>
                </div>

                <div class="bg-gray-50 p-3 rounded-lg">
                    <div class="text-sm text-gray-600">风险比率</div>
                    <div class="text-lg font-semibold">${riskData.riskRatio}</div>
                    <div class="text-xs text-gray-500">建议风险比率: 1:2 - 1:3</div>
                </div>

                <div class="space-y-2">
                    <div class="text-sm text-gray-600">风险提示</div>
                    ${this.renderRiskAlerts(riskData.alerts)}
                </div>
            </div>
        `;

        this.riskContainer.innerHTML = riskHTML;
    }

    // 获取信号类型对应的样式类
    getSignalClass(type) {
        const classes = {
            '买入': 'tag-green',
            '卖出': 'tag-red',
            '观望': 'tag-yellow'
        };
        return classes[type] || 'tag-gray';
    }

    // 渲染技术指标
    renderIndicators(indicators) {
        return indicators.map(indicator => `
            <div class="flex justify-between items-center py-1">
                <span>${indicator.name}</span>
                <span class="font-medium ${indicator.signal === '看涨' ? 'text-green-600' : 'text-red-600'}">
                    ${indicator.signal}
                </span>
            </div>
        `).join('');
    }

    // 渲染风险提示
    renderRiskAlerts(alerts) {
        return alerts.map(alert => `
            <div class="flex items-start space-x-2">
                <span class="tag ${alert.level === 'high' ? 'tag-red' : 'tag-yellow'}">
                    ${alert.level === 'high' ? '高风险' : '警告'}
                </span>
                <span class="text-sm text-gray-600">${alert.message}</span>
            </div>
        `).join('');
    }
}